<template>
  <a-card :bordered="false">
    <a-list item-layout="vertical" size="large"  :pagination="pagination" :data-source="articles" @change="handleTableChange"  >
      <a-list-item slot="renderItem" key="item.title" slot-scope="item" style="margin-left: 50px" size="small">
        <template >
          <div>
            <a @click="$router.push(`articledetail/${item.ID}`)" style="font-size: large;font-family: '微软雅黑' ">{{ item.title }} </a>
          </div>
          <div style="margin-left: 20px">
            <p >{{ item.desc }}</p>
          </div>
          <div>
            <span style="margin-left: 20px">
              <a-icon type="eye-o" style="margin-right: 8px" />
              <span>{{ item.viewnum }}</span>
            </span>
            <span style="margin-left: 20px">
              <a-icon type="heart-o" style="margin-right: 8px" />
               <span>{{ item.likenum }}</span>
            </span>
            <span style="margin-left: 20px" >
              <a-icon type="clock-circle" style="margin-right: 8px" />
              <span v-text="dataFormat(item.UpdatedAt)"></span>
            </span>
          </div>
        </template>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>
import moment from 'moment/moment'

export default {
  data () {
    return {
      articles: [],
      pagination: {
        pageSizeOptions: ['10', '20'],
        pageSize: 10,
        total: 0,
        showSizeChanger: true
      },
      queryParam: {
        pagesize: 10,
        pagenum: 1
      }
    }
  },
  created () {
    this.getArticles()
  },
  methods: {
    async getArticles () {
      const { data: res } = await this.$axios.get('/client/articles', {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.articles = res.data
      this.pagination.total = res.total
    },
    handleTableChange (pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pagesize = pagination.pageSize
      this.queryParam.pagenum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pagenum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getArticles()
    },
    dataFormat (val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  }
}
</script>
<style></style>
